<template>
  <div 
  v-loading.fullscreen.lock="loading" element-loading-text="加载" 
  :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
  <template v-if="!loading">
    <nav-header/>
    <nav-aside />
    <div class="aui-content__wrapper">
      <main-content v-if="!$store.state.contentIsNeedRefresh" />
      <go-top></go-top>
    </div>
    <Footer></Footer>
  </template>
  </div>
</template>
<script>
import NavHeader from '@/views/components/NavHeader.vue'
import NavAside from '@/views/components/NavAside.vue'
import MainContent from '@/views/components/MainContent.vue'
import GoTop from '@/views/components/GoTop.vue'
import Footer from '@/views/components/Footer.vue'
import { debounce } from 'lodash'
import servicesApi from '@/services/servicesApi'
import storageService from '@/store/storage'
export default {
  name: 'dashboard',
  provide() {
    return {
      // 刷新
      refresh() {
        // console.log('刷新')
        this.$store.state.contentIsNeedRefresh = true
        this.$nextTick(() => {
          this.$store.state.contentIsNeedRefresh = false
        })
      }
    }
  },
  components: {
    NavHeader,
    NavAside,
    MainContent,
    Footer,
    GoTop
  },
  data() {
    return {
      loading: true
    }
  },
  watch: {
    $route: 'routeHandle'
  },
  created() {
    this.resetDocumentClientHeight()
    this.routeHandle(this.$route)
    Promise.all([
      this.getUserInfo(),
      this.getPermissions()
    ]).then(() => {
      this.loading = false
    })
  },
  mounted() {
    this.resetDocumentClientHeight()
  },
  methods: {
    // 重置窗口可视高度
    resetDocumentClientHeight() {
      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
      window.addEventListener('resize', debounce(() => {
        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
      }, 150))
    },
    // 路由, 监听
    routeHandle(route) {
      if (!route.meta.isTab) {
        return false
      }
      let tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
      if (!tab) {
        tab = {
          ...window.SITE_CONFIG['contentTabDefault'],
          ...route.meta,
          'name': route.name,
          // 'params': { ...route.params },
          // 'query': { ...route.query }
        }
        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
      }
      this.$store.state.sidebarMenuActiveName = tab.menuId
      this.$store.state.contentTabsActiveName = tab.name
    },
    // 获取当前用户信息
    getUserInfo() {
      // this.$store.state.user.userId = 37
      // this.$store.state.user.username = 'admin'
      // this.$store.state.user.state = 3

      let userId = storageService.getAccountId()
      return servicesApi.getUserById(userId).then(res => {
        let data = res.data.data
        if (res.data.code !== 200) {
          return this.$message.error(res.data.msg)
        }
        // // console.log(res.data.data)
        // this.$store.state.user.userId = data.userId //用户id
        // this.$store.state.user.username = data.username //账号
        // this.$store.state.user.state = data.state // 身份
        this.$store.state.user = data
        this.$store.state.user.phone = data.phone || data.stuPhone || data.teaPhone //统一手机号字段
        this.$store.state.user.name = data.name || data.stuName || data.teaName //统一姓名字段
        this.$store.state.user.dept = data.department || data.stuDepartment || data.teaDepartment
        // console.log('用户信息%o', this.$store.state.user)
      })
    },
    // 获取权限
    getPermissions() {
      // window.SITE_CONFIG['permissions'] = ["sys:schedule:info", "sys:params:export", "sys:menu:update", "sys:menu:delete", "sys:dept:update", "sys:params:update", "sys:dept:info", "sys:dict:delete", "sys:role:page", "sys:menu:list","sys:user:get"]
      return servicesApi.getBtnPermissions().then(res => {
        if (res.data.code !== 200) {
          return this.$message.error(res.data.msg)
        }
        window.SITE_CONFIG['permissions'] = res.data.data
        // console.log('用户按钮权限%o', window.SITE_CONFIG['permissions'])
      }).catch(() => {})
      // return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }
      //   window.SITE_CONFIG['permissions'] = res.data
      // }).catch(() => {})
    }
  }

}
</script> 
<style scoped>
.router-center {
  width: calc(100vw - 200px);
  /* width: 82%; */
  /* border:1px solid #83c0fe; */
  height: calc(100vh - 100px);
  /* height: 82.4%; */
  position: fixed;
  top: 58px;
  left: 190px;
  padding: 18px;
  overflow-y: auto;
  box-shadow: 0 0 5px #ccc;
}

/*.header {*/
/*  width: 100vw;*/
/*  height: 60px;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  box-shadow: 0 2px 3px #eee;*/
/*  position: relative;*/
/*  background-color: #07162b;*/
/*  color: white;*/
/*}*/
.el-header {
  padding: 0;
}

.el-main {
  padding: 0;
}

/*.logo {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  width: 200px;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  background-color: #242e42;*/
/*  height: 60px;*/
/*  overflow: hidden;*/
/*  font-size: 1.6vw;*/
/*}*/

/*.icon-indent {*/
/*  position: absolute;*/
/*  left: 220px;*/
/*  color: #eee;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  height: 60px;*/
/*}*/

/*.icon-indent-button {*/
/*  padding: 3px;*/
/*  border: 1px solid #999;*/
/*  cursor: pointer;*/
/*  border-radius: 3px;*/
/*}*/

/*.login-info {*/
/*  position: absolute;*/
/*  right: 20px;*/
/*  line-height: 60px;*/
/*}*/
/*.login-info li{*/
/*  display: inline-block;*/
/*  margin-right: 1vw;*/
/*}*/
::v-deep(.el-dropdown) {
  color: #fff;
}

/*.content{*/
/*  width: 300px;*/
/*  height: 200px;*/
/*  background-color: #42b983;*/
/*}*/
</style>
